<template>
    <div :class="{'active':brickInfo.active,'hover-box-withhover': hover.brickHover,'hover-box': !hover.brickHover}"
         @click="beClick();">
        <span class="move"/>
        <span class="remove">
            <span class="close-btn"/>
        </span>
    </div>
</template>

<script>
    export default {
        name: 'Hover',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: true,
                        brickHover: true,
                        isSaved: true,
                        roundTabBtn: {
                            current: 'left',
                            // 判断当前组件是否需要设置样式
                            currentType: ''
                        }
                    };
                }
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            }
        },
        methods: {
            beClick() {
                this.hover.isSaved = false;
                let type = this.$parent.brickInfo.type;
                if (type && type === 'YXBlank') {
                    this.hover.roundTabBtn.current = 'left';
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    $color-7ca4ef: #7ca4ef;

    .hover-box-withhover {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid transparent;
        z-index: 9;

        &:hover {
            border-color: $color-7ca4ef;
        }
        &:hover {
            .move {
                display: block;
                width: 50px;
                height: 15px;
                cursor: Move;
                box-sizing: border-box;
                border: 1px solid $color-7ca4ef;
                border-top: none;
                background-color: #fff;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -25px;
                text-align: center;

                &::before, &::after {
                    content: '';
                    display: block;
                    width: 70%;
                    height: 1px;
                    margin: 4px auto;
                    background-color: $color-7ca4ef;
                }
            }
            .remove {
                display: block;
                width: 18px;
                height: 18px;
                box-sizing: border-box;
                border: 1px solid $color-7ca4ef;
                position: absolute;
                top: -1px;
                right: -1px;
                color: $color-7ca4ef;
                background-color: #fff;

                .close-btn {
                    display: block;
                    width: 67%;
                    height: 67%;

                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotateZ(45deg);

                    &::before, &::after {
                        content: '';
                        display: block;
                        border-radius: 1px;
                        background-color: $color-7ca4ef;

                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                    &::before {
                        width: 100%;
                        height: 2px;
                    }
                    &::after {
                        width: 2px;
                        height: 100%;
                    }
                }
            }
        }
    }

    .hover-box {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid transparent;
    }

    .active {
        border-color: $color-7ca4ef;
    }

    .active {
        border-color: $color-7ca4ef;
    }
</style>
